<!--审核参与人员-->
<template>
    <f7-page no-toolbar
             infinite
             :infinite-distance="50"
             :infinite-preloader="showPreloader"
             @infinite="loadMore"
             ptr @ptr:refresh="loadMore2"
    >

        <f7-navbar title="审核已报名人员" back-link="Back"></f7-navbar>
        <f7-block class="margin-top">该聚会男女比例:1/3 左滑可进入编辑</f7-block>
        <f7-list media-list class="list-content">
            <f7-list-item mediaItem chevron-center v-for="(item, index) in items" :key="index" swipeout
                          title="真实姓名"
                          link="/member/memberView/"
                          after="18666981551"
                          subtitle="28岁"
                          text="很想参加这个活动，这里是报名备注，如无，则填个人签名"
            >
                <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="100"/>

                <f7-swipeout-actions right>
                    <f7-swipeout-button color="red">不通过</f7-swipeout-button>
                    <f7-swipeout-button color="blue">通过</f7-swipeout-button>
                </f7-swipeout-actions>

            </f7-list-item>

        </f7-list>
    </f7-page>
</template>
<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                allowInfinite: true,
                showPreloader: true,
                users: [],
            };
        },
        created() {
            // this.list();
        },
        methods: {
            list() {

                axios({
                    url: `/test/list`,
                    method: 'get',
                    baseURL: 'http://192.168.0.102:8080'
                }).then(res => {
                    let data = res.data
                    console.info(data);
                    this.users = data
                }).catch(error => {
                    alert(error.response.data.error_msg)
                })

            },
            loadMore() {
                const self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;

                setTimeout(() => {
                    if (self.items.length >= 200) {
                        self.showPreloader = false;
                        return;
                    }

                    const itemsLength = self.items.length;

                    for (let i = 1; i <= 20; i += 1) {
                        self.items.push(itemsLength + i);
                    }

                    self.allowInfinite = true;
                }, 1000);
            },
            loadMore2(event, done) {

                setTimeout(() => {
                    // todo
                    done();
                }, 1000);
            }
        },
    };
</script>
<style scoped>
    .list-content {
        margin-top: -20px;
    }
</style>

